<template>
    <div class="box">
        <h3>路由参数</h3>
        <p>1.查询参数</p>
        <pre>
                vue路由模块提供的RouterLink组件，依然可以继续使用http协议的查询参数功能;
                    + 在to属性取值的路径后面，以关键字 ? 描述后续部分的查询参数
                    + 查询参数由 key=value&key=value&…… 格式定义，key为参数名，value 为参数值，&连接多个参数
        
                方式一：【选项式规则】
                    vue路由通过地址方式定义查询参数，在路由切换过程中，会被记录在 激活路由信息对象中【 $route 】;
                    以http协议描述的 ? 参数，将被记录在 $route.query 对象中；
        
                方式二：【组合式规则】
                    vue路由模块提供专用的组合式API 信息对象加载方法 useRoute ，通过该方法可以在组合式语法中直接获取信息对象；
                    该信息对就是 vue路由加载的全局 激活信息对象 $route；
                    通过加载的 信息对象中的 query 属性可以获取参数
                        import { useRoute } from "vue-router";
                        const $route = useRoute();
                        function showQuery() {
                            alert($route.query.argA + ":" + $route.query.argB)
                        }
                        console.log($route.query)
                </pre>
                <p>2.rest路径参数【动态路径参数】</p>
                <pre>
                        vue路由模块提供的RouterLink组件，依据与路由组件 path 定义规则，在路径上隐藏参数取值；
                        需要路由路径定义时提供相关支持，path取值  { path:"/路径/:参数名" } 或者 { path:"路径/:参数名" }
                        例如
                            请求地址  /detail   
                            携带参数  filmId=234567   
                                    aa=1234
                
                            rest:  /detail/234567/1234    { path:"/detail/:filmId/:aa" }
                                或  /234567/detail/1234    { path:"/:filmId/detail/:aa" }
                                或  /1234/detail/234567    { path:"/:aa/detail/:filmId" }
                
                        rest 参数在vue路由组件 路径定义过程中 可以通过 ? 关键字描述路径参数是否为可选参数;
                        例如：path:a/:b/:c?
                                a 为路径
                                b 为必传参数
                                c 为可选参数
                
                        方式一：【选项式规则】
                            vue路由通过地址方式定义查询参数，在路由切换过程中，会被记录在 激活路由信息对象中【 $route 】;
                            rset参数将被记录在 $route.params 对象中；
                
                        方式二：【组合式规则】
                            vue路由模块提供专用的组合式API 信息对象加载方法 useRoute ，通过该方法可以在组合式语法中直接获取信息对象；
                            该信息对就是 vue路由加载的全局 激活信息对象 $route；
                            通过加载的 信息对象中的 query 属性可以获取参数
                                import { useRoute } from "vue-router";
                                const $route = useRoute();
                                function showQuery() {
                                    alert($route.params.argA + ":" + $route.params.argB)
                                }
                                console.log($route.params)
                        </pre>
                   <div>
                        <h4>查询参数</h4>
                        <div>静态参数定义</div>
                        <RouterLink to="/QueryPage?argA=参数A&argB=参数B">QueryPage-?argA=参数</RouterLink>
                        <div>动态参数定义</div>
                        <RouterLink :to="`/QueryPage?argA=${argA}&argB=${argB}`">QueryPage-?argA=参数</RouterLink><br>
                        <RouterLink :to="
                        {
                             path:'/QueryPage',
                             query:{
                                argA:argA,
                                argB:argB
                             }
                        }
                        ">QueryPage-?argA=参数</RouterLink>
                        <RouterLink :to="
                            {
                                name: 'QueryPage',
                                query: {
                                    argA:argA,
                                    argB: argB
                                }
                            }
                        ">QueryPage-?{{ `argA=${argA}&argB=${argB}` }}</RouterLink>


                        <hr>
                        <h4>rest 参数导航</h4>
                        <div>静态参数定义</div>
                        <RouterLink to="/ParmasPage/参数A/参数B">paramsPage-?argA= 参数</RouterLink>

                        <div>动态参数定义</div>
                        <RouterLink :to="`/ParmasPage/${argA}/${argB}`">paramsPage-{{argA}}---{{ argB }}</RouterLink>
                        <div>具名路由定义和具名路由动态参数定义</div>
                        <RouterLink :to="
                        {
                            name:'ParmasPage',
                            params:{
                                argA:argA,
                                argB:argB
                            }
                        }
                        ">paramsPage-{{argA}}---{{ argB }}</RouterLink>



                   </div>
             

            <hr>
                <RouterView></RouterView>
    </div>
</template>
<!-- <script setup>
import {ref} from 'vue'
let argA=ref('argA啊啊啊')
let argB = ref('argB哈哈哈哈')

</script> -->
<script>
 export default {
    data(){
        return {
            argA:'sb',
            argB:'sb2'
        }
    }
 }

</script>